<template>
  <el-col class="app-v-center app-column" style="overflow-y: auto;">
    <div class="app-fill app-flex">
      <div class="app-col-9 mx-3 app-flex app-column">
        <div class="app-h-64px app-fill-width app-v-center">
          <div class="app-h-48px app-fill-width app-v-center app-h-between px-4 app-ba-1px-l2" style="background: #f8f8f8">
            <div>
              角色列表
            </div>
            <div>
              <el-button type="primary" style="background: #545c64" size="mini" @click="addRole">添加角色</el-button>
            </div>
          </div>
        </div>
        <div class="app-flex-1 app-ba-1px-l3">
          <el-table
            ref="listTable"
            border
            :data="dataList"
            style="width: 100%;overflow-y: auto;"
            @selection-change="selectRole"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="name"
              align="center"
              label="角色名称"
            />

            <el-table-column
              align="center"
              width="120"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row)"
                ><i class="el-icon-edit" /></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  :disabled="scope.row.isDelete === 0"
                  @click="handleDelete(scope.row)"
                ><i class="el-icon-delete" /></el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
      <div class="app-flex-1 app-flex app-column mr-3">
        <div class="app-h-64px app-fill-width app-v-center">
          <div class="app-h-48px app-fill-width app-v-center app-h-between pl-4 app-ba-1px-l2" style="background: #f8f8f8">
            <div>
              权限列表
            </div>
            <div class="mr-3">
              <i class="iconfont icon-keep app-font-18 app-pointer" style="color: #96b2c4" @click="saveAuth" />
            </div>
          </div>
        </div>
        <div class="app-flex-1 app-ba-1px-l3 app-scroll innerbox">
          <el-tree
            ref="authtree"
            :data="tdata"
            node-key="id"
            :props="defaultProps"
            icon-class="iconfont icon-wenjianjia1"
            show-checkbox
            default-expand-all
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="添加角色"
      :visible.sync="addRoleDialog"
      width="800px"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item prop="name" label="角色名称">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addRoleDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </el-col>
</template>

<script>
import { getMenuList,selectMenuList,saveMenuList,getRoleList,deleteRole,updateRole,addRole } from '@/api/org-user'
export default {
  data: () => ({
    isEdit: false,
    addRoleDialog: false,
    rules: {
      name: [
        { required: true, message: '请输入橘色名称', trigger: 'blur' }
      ]
    },
    form: {
      id: void 0,
      name: ''
    },
    currentRoleId: null,
    dataList: [],
    tdata: [],
    defaultProps: {
      children: 'children',
      label: 'name'
    }
  }),
  watch: {
    currentRoleId() {
      if (this.currentRoleId) {
        selectMenuList({ id: this.currentRoleId }).then(res => {
          const ids = []
          const auths = res.data
          // 用队列处理没有子节点的元素进行遍历
          while (auths.length > 0) {
            const current = auths.pop()
            if (current.children?.length) {
              auths.push(...current.children)
            } else {
              ids.push(current.id)
            }
          }
          this.$refs.authtree.setCheckedKeys(ids)
        })
      }
    }
  },
  mounted() {
    this.getList()
    this.getAuthorities()
  },
  methods: {
    selectRole(val) {
      if (val.length > 1) {
        this.$refs.listTable.clearSelection()
        this.$refs.listTable.toggleRowSelection(val.pop())
        return
      }
      console.log('111')
      if (val[0]) {
        this.currentRoleId = val[0].id
      } else {
        this.currentRoleId = null
      }
    },
    saveAuth() {
      if (!this.currentRoleId) {
        this.$message({ type: 'warning',message: '请选择角色' })
        return
      }
      const params = {
        menuId: [...this.$refs.authtree.getCheckedKeys(false),...this.$refs.authtree.getHalfCheckedKeys()],
        roleId: this.currentRoleId
      }
      saveMenuList(params).then(res => {
        if (res.code === 200) {
          this.$message({ type: 'success',message: '保存成功' })
        }
      })
    },
    getList() {
      getRoleList().then(res => {
        if (res.code === 200) {
          this.dataList = res.data
        }
      })
    },
    getAuthorities() {
      getMenuList().then(res => {
        if (res.code === 200) {
          this.tdata = res.data
        }
      })
    },
    addRole() {
      this.form = {
        id: void 0,
        name: ''
      },
      this.addRoleDialog = true
    },
    handleDelete(item) {
      this.$confirm(`确认删除角色${item.name}？`,'提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRole({ id: item.id }).then(res => {
          if (res.code === 200) {
            this.$message({ type: 'success',message: '已删除' })
            this.getList()
          }
        })
      }).catch(() => {
        this.$message('已取消')
      })
    },
    handleEdit(item) {
      this.isEdit = true
      this.form = item
      this.addRoleDialog = true
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            updateRole(this.form).then(res => {
              if (res.code === 200) {
                this.$message({ type: 'success',message: '修改成功' })
                this.addRoleDialog = false
                this.getList()
              }
            })
          } else {
            addRole(this.form).then(res => {
              if (res.code === 200) {
                this.$message({ type: 'success',message: '添加成功' })
                this.addRoleDialog = false
                this.getList()
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0)
}
::v-deep .el-tree-node__expand-icon.expanded:before {
    content: "\e64b";
}
::v-deep .el-tree-node .is-leaf:before {
  font-size: 14px;
  color: #008ad388;
  content: "\e64a";
}
::v-deep .el-tree-node__expand-icon {
  font-size: 18px;
  color: #d7ba6e
}
 .innerbox::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
}
.innerbox::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);

}
</style>
